<template>
	<div>
		<Modal
			:mask-closable="false"
			v-model="modalState"
			:title="`${$t('common.Import')}`"
			class-name="importExcelModal vertical-center-modal"
			@on-cancel="closeClick"
			:closable="false"
			:footer-hide="true"
			class="modal-wrap-layout"
		>
			<div class="content">
				<div class="upload">
					<div class="importBtn">
						<Upload
							:on-success="upload"
							:on-error="uploadErro"
							:before-upload="beforeUpload"
							:on-progress="onProgress"
							:show-upload-list="false"
							:headers="headers"
							type="drag"
							:action="action"
						>
							<img src="~images/common/importImg.png" alt />
						</Upload>
					</div>
					<span>{{ $t('common.importfile') }}</span>
				</div>
				<Progress :percent="uploadProgress" :stroke-width="20" v-show="uploadProgress > 0" status="active" text-inside />

				<button class="closeBtn" @click="closeClick">{{ $t('common.close') }}</button>
			</div>
		</Modal>
		<Modal :mask-closable="false" class="infoModel" width="550" v-model="infoState" @on-cancel="infoCancel">
			<div class="content">
				<p v-html="infoText"></p>
			</div>
		</Modal>
	</div>
</template>

<script>
const isTong = process.env.NODE_ENV === 'tong';
let ksiot = '';
if (isTong) {
	ksiot = '';
}
export default {
	name: 'importExcel',
	props: ['importExcelStateF', 'assetsNo', 'isUpdate', 'url'],
	data() {
		return {
			uploadProgress: 0,
			madalUpdate: this.isUpdate,
			modalState: this.importExcelStateF,
			uploadFiles: {},
			headers: {
				token: localStorage.getItem('ziyunFactoryPortalToken'),
			},
			infoState: false,
			infoText: '',
			action: '',
		};
	},
	mounted() {
		if (this.url) this.action = this.url;
	},
	methods: {
		onProgress(event, file, fileList) {
			console.log(event);
			this.uploadProgress = event.percent - 1;
			console.log(this.uploadProgress);
		},
		closeClick() {
			this.modalState = false;
			this.$emit('importExcelChange');
		},
		beforeUpload(file) {
			this.uploadProgress = 1;
			this.uploadFile = file;
			let reg = /\.(xlsx)|(xls)$/;
			if (!this.uploadFile.name.toLowerCase().match(reg)) {
				this.$Message.warning({ content: '请上传excel文件！', duration: 6, closable: true });
				this.uploadFiles = '';
				return false;
			}
		},
		upload(res) {
			this.uploadProgress = 100;
			console.log();

			if (res.code == 200) {
				if (res.data && res.data.success) {
					this.modalState = false;
				}
				this.$emit('importExcelChange', 'success');
				this.$emit('importExcelChangepub', res);
				this.$Message.success(res.msg);
				if (res.data.messages && res.data.messages.length && !res.data.success) {
					this.$Message.success({ content: res.data.messages.join(','), duration: 6, closable: true });
				} else {
					this.$Message.success({ content: res.msg });
				}
			} else {
				if (res.data && res.data.errorInfo && res.data.errorInfo.length) {
					this.$Message.warning({ content: res.data.errorInfo.join(','), duration: 6, closable: true });
				} else {
					if (res.data && res.data.messages && res.data.messages.length) {
						this.$Message.warning({ content: res.data.messages.join(','), duration: 6, closable: true });
					} else {
						this.$Message.warning({ content: res.msg, duration: 6, closable: true });
					}
				}

				// }
			}
		},
		uploadErro(response) {
			this.$Message.warning({ content: response, duration: 6, closable: true });
		},
		infoCancel() {
			this.infoState = false;
		},
	},
};
</script>
<style lang="scss">
  .importExcelModal {
    .content {
      height: 380px;

      .upload {
        .importBtn {
          position: relative;
          width: 175px;
          margin: 0 auto;
          margin-top: 30px;
          text-align: center;

          img {
            width: 175px;
            height: 150px;
            margin-left: -35px;
            margin-bottom: 20px;
          }

          input {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
          }

          .ivu-upload:hover {
            border-color: #ffffff;
          }
        }

        span {
          display: block;
        }

        span {
          margin-bottom: 50px;
          font-size: 13px;
          text-align: center;
          line-height: 15px;
          color: #333;
        }
      }

      .uploadSucc,
      .uploadErr {
        text-align: center;

        i {
          margin-top: 70px;
          margin-bottom: 45px;
          font-size: 50px;
          color: #1294f7;
        }

        span {
          display: block;
          margin-bottom: 90px;
          font-size: 13px;
          line-height: 13px;

          a {
            position: relative;
            text-decoration: underline;
            color: #2296f4;

            input {
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              opacity: 0;
            }
          }
        }
      }

      .uploadErr {
        i {
          color: #ff3e68;
        }
      }

      .closeBtn {
        display: block;
        width: 140px;
        height: 40px;
        margin: 0 auto;
        margin-top: 30px;
        color: #333;
        background-color: #eee;
        cursor: pointer;
        border: 0px;
        font-size: 14px;
      }

      .closeBtn:hover {
        opacity: 0.8;
      }
    }

    &.vertical-center-modal {
      display: flex;
      align-items: center;
      justify-content: center;

      .ivu-modal {
        top: 0;
      }
    }

    .ivu-upload-drag {
      border-width: 1px;
      border-color: #fff;
    }

    .ivu-upload-drag:hover,
    .ivu-upload-dragOver {
      border-color: #2d8cf0;
    }

    .continue {
      display: inline-block;
      color: #2296f4;
      cursor: pointer;

      .con {
        text-decoration: underline;
        font-weight: normal;
      }
    }
  }
</style>
